<template>
    <div class="container">
        <div class="table">
            <el-table :data="store.SceneEvent" height='220'>
                <el-table-column prop="name" label="事件类型" />
                <el-table-column prop="area" label="肇事地点" />
                <el-table-column prop="driver" label="肇事人" />
            </el-table>
        </div>
        <div @click="flash" class="refresh">
            <span>刷新</span><i class="fa-solid fa-arrows-rotate"></i>
        </div>
        <span class="event">事故列表</span>
    </div>
</template>

<script setup>
import { mapStore } from '@/store';
import { getEvent } from '../Hooks/getEventHook';
import { onMounted } from 'vue';
import axios from 'axios';
const { flash } = getEvent()
const store = mapStore()
onMounted(async () => {
    const res = await axios.get('http://39.103.151.139:8000/gis/event')
    res.data.features.map(item => {
        store.SceneEvent.push({
            name: item.properties.name,
            area: item.properties.area,
            driver: item.properties.driver,
        })
    })
})
</script>

<style scoped lang="scss">
.container {
    position: relative;

    .table {
        background: url('/src/assets/大屏image素材/卡片-框/t_bg.png');
        width: 350px;
        height: 250px;
        z-index: 2000;
        position: fixed;
        top: 15%;
        left: 5%;
    }

    .el-table {
        width: 350px;
        margin-top: 30px;
        opacity: 0.8;
        background: url('/src/assets/大屏image素材/卡片-框/t_bg.png');
    }

    .refresh {
        position: fixed;
        top: 16%;
        left: 24%;
        z-index: 3000;

        span,
        i {
            color: #fff
        }
    }

    .refresh:hover {
        cursor: pointer;
    }

    // 表格 头 字颜色
    ::v-deep .el-table {
        thead {
            color: #fff;
        }

        //表格 头背景颜色
        th.el-table__cell {
            background: url('/src/assets/大屏image素材/背景/bg (3).jpg');
        }

        // 表格中data背景
        tr {
            background: url('/src/assets/大屏image素材/背景/bg (3).jpg');
        }

        // 表格中 data字体颜色
        td.el-table__cell {
            color: #1d2ee5;
            ;
            font-weight: 700
        }


    }
}


.event {
    position: fixed;
    top: 16%;
    left: 14%;
    z-index: 3000;
    color: #fff;
}
</style>
